<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>修改密码</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
</head>
<header th:if="${isStu}">
    <div>
        <ul class="layui-nav">
            <!-- 设定layui-this来指向当前页面,即绿色滑块移动到该分类下方 -->
            <li class="layui-nav-item">
                <a th:href="@{/index}">真会学</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:" sec:authentication="name"><i class="layui-icon layui-icon-user" style="font-size: 20px;margin: 0px 10px;"></i>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:">个人信息</a></dd>
                    <dd><a th:href="@{/logout}">退了</a></dd>
                </dl>
            </li>
        </ul>
    </div>
</header>
<body>
<div class="over"></div><!--遮罩层-->
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-12" style="text-align: center">
            <h1 th:if="${isFirst}">首次登录请修改密码</h1>
            <form class=" layui-form" id="post_form"  action="" method="post">
                <div class="thumbnail" style="margin-bottom: 0px;">
                    <div class="caption">
                        <div class="form-group">
                            <label class=" control-label">请输入原密码</label>
                            <div class="layui-input-inline">
                                <input type="password" class="layui-input" id="old" lay-verify="required" name="oldPassword" placeholder="请输入原密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class=" control-label">请输入新密码</label>
                            <div class="layui-input-inline">
                                <input type="password" class="layui-input" id="new" lay-verify="required" name="newPassword"  placeholder="请输入新密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class=" control-label">请确认新密码</label>
                            <div class="layui-input-inline">
                                <input type="password" class="layui-input" id="checkNew" lay-verify="required" placeholder="请确认输入的新密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <p>
                                <button type="button" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </p>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--<footer class="layui-trans layadmin-user-login-footer">-->
<!--    <a href="https://beian.miit.gov.cn/" target="_blank">-->
<!--        皖ICP备2022003330号-->
<!--    </a>-->
<!--</footer>-->

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.serializeJSON/3.1.0/jquery.serializejson.min.js"></script>
<script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table', 'upload', 'form'], function () {
        var table = layui.table;
        var upload = layui.upload;
        var form = layui.form;
        var pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/;

        form.on('submit(demo1)',function (data){

            // console.log($('#checkNew'))
            // console.log($('#new'))

            if($('#checkNew')[0].value != $('#new')[0].value){
                // layer.msg('两次输入的密码不一致，请重新输入',{icon:2,time:1000})
                layer.msg("两次输入的密码不一致，请重新输入", {icon: 2, time: 1000}, function () {
                    // window.location.href = '/front/password';
                })
                return;
            }
            if (!pattern.test($('#checkNew')[0].value)){
                // layer.msg('必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间，请重新输入',{icon:2,time:1000})
                layer.msg("必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-16之间，请重新输入", {icon: 2, time: 2000}, function () {
                    // window.location.href = '/front/password';
                })
                return;
            }

            var _self = data.field;

            // console.log("_self-->", _self)

            // 序列化json格式
            // var allData = $('#post_form').serializeJSON();
            // console.log(JSON.stringify(allData));

            $.ajax({
                url:'/user/updatePassword',
                type: 'post',
                data: {
                    'oldPassword':_self.oldPassword,
                    'newPassword':_self.newPassword
                },
                success: function (res){
                    console.log(res)
                    console.log('返回值res-->',res)
                    if(res.code === 100){
                        layer.msg('更新成功',{time:1000,icon:6},function () {
                            // $("#post_form")[0].reset();
                            window.location.href = '/index';
                        })
                    }else{
                        layer.msg(res.msg,{time:1000,icon:5})

                    }
                },
                error: function (){
                    layer.msg('修改数据时发生错误，请重试',{time:1000,icon:7})
                }
            })

        })



    })
</script>

</body>
</html>